{% extends "base.html" %}

{% block head %}
    <title>首页</title>
    <link rel="stylesheet" href="/static/css/topic_page.css"></link>

{% endblock %}


{#主体代码#}
{% block content %}
    <div class="topic_page">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>题目类型</th>
                <th>题目内容</th>
                <th>加入时间</th>
                <th>操作</th>
            </tr>
            </thead>
            {% for question in TopicModels %}
                <tr class="question-row" data-id="{{ question.id }}" onclick="moreInfoQuestion({{ question.id }})">
                    <td>{{ question.id }}</td>
                    <td>{{ question.type }}</td>
                    <td>{{ question.title }}</td>
                    <td>{{ question.create_time }}</td>
                    <td onclick="event.stopPropagation()">
                        <div class="more-button">
                            &#x2022;&#x2022;&#x2022;
                            <div class="dropdown-menu">
                                <button onclick="editQuestion({{ question.id }})">编辑</button>
                                <button onclick="deleteQuestion({{ question.id }})">删除</button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="details-row" style="display: none;">
                    <td colspan="5">
                        <strong>难度：</strong>{{ question.difficulty }}<br>
                        <strong>题目：</strong>{{ question.content }}<br>
                        {% if question.type == '选择题' %}
                            <strong>选项：</strong>
                            <ul style="list-style-type: none; padding-left: 2em;">
                                {% for option in question.options %}
                                    <li>{{ 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[(loop.index0) % 26] }}: {{ option }}</li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        <strong>答案：</strong>{{ question.answer }}<br>
                        <strong>解析：</strong>{{ question.explanation }}<br>
                        <strong>创建时间：</strong>{{ question.create_time }}
                    </td>
                </tr>

            {% endfor %}
        </table>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/topic_page.js"></script>
{% endblock %}